<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 示例</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/example-css.css">
    <style>
        p {
            color: #666;
        }

        #id-select {
            color: rgb(31, 1, 167);
        }

        .class-select {
            color: chocolate;
        }
    </style>
</head>

<body>
    <hr>
    <h2>样式三种引入方法</h2>
    <hr>
    <p><span>这是一个外部样式</span></p>
    <p>这是一个内部样式</p>
    <p style="color: seagreen">这是一个内联样式</p>

    <br>
    <hr>
    <h2>三种选择器</h2>
    <hr>
    <p>这是一个标签选择器</p>
    <p id="id-select">这是一个ID选择器样式</p>
    <p class="class-select">这是一个类选择器样式</p>

    <br>
    <hr>
    <h2>文本</h2>
    <hr>
    <div class="text-box">
        <p class="font-style text-style">
            通过CSS的Text属性，你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等，你可以观察下述的一段简单的应用了CSS文本格式的段落。
        </p>
    </div>

    <br>
    <hr>
    <h2>链接</h2>
    <hr>
    <p>
        <a href="#link1">连接默认样式</a>
        <a href="#link2">连接默认样式</a>
        <a href="#link3">连接默认样式</a>
        <a href="#link4">连接默认样式</a>
    </p>
    <p class="link-style">
        <a href="#link5">修改样式的连接</a>
        <a href="#link6">修改样式的连接</a>
        <a href="#link7">修改样式的连接</a>
        <a href="#link8">修改样式的连接</a>
    </p>

    <br>
    <hr>
    <h2>列表</h2>
    <hr>
    <ul>
        <li><a href="#">列表项1</a></li>
        <li><a href="#">列表项2</a></li>
        <li><a href="#">列表项3</a></li>
        <li><a href="#">列表项4</a></li>
    </ul>

    <br>
    <hr>
    <h2>浮动</h2>
    <hr>
    <div class="float-box">
        <div id="float-box1">1</div>
        <div id="float-box2">2</div>
        <div id="float-box3">3</div>
    </div>

    <br>
    <hr>
    <h2>绝对定位</h2>
    <hr>
    <div class="postion-box">
        <div id="postion-box1">1</div>
        <div id="postion-box2">2</div>
        <div id="postion-box3">3</div>
    </div>
</body>

</html>